<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    {% include "component/static_resource_css.html" %}
    <!-- Bootstrap 的 CSS 文件 -->
    {#    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">#}
    {#    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>#}
    {#    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>#}
    {#    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>#}
    <!-- editormd CSS文件 -->
    <link rel="stylesheet" href="/static/editor-md/css/editormd.css"/>
    <title>文章发布</title>
    <style>
        .publish_button {
            color: #ff6a46;
            border-color: #ff6a46;
        }

        .publish_button:hover {
            color: #fff;
            background-color: #ff6a46;
            border-color: #ff6a46;
        }

        body {
            background-image: none;
        }
    </style>
</head>
<body>
<div class="nk-container">
    {% include 'component/header.html' %}
    <div class="container" style="padding-bottom: 20px"></div>
    <div id="layout">
        <header>
            <div class="form-group" style="display: flex;justify-content: center; align-content: center">
                <input type="text" class="form-control"
                       style="font-size: 24px; font-weight: 500; width: 90%;"
                       id="recipient-name" placeholder="输入文章标题..." required>
            </div>
        </header>

        <div style="text-align: center; padding-bottom: 1rem;">
            <span>欢迎使用 PSDN， <span style="color: #ee3e15">请在左侧编辑框编辑讨论</span>，在右侧查看效果</span>
        </div>
        <div id="test-editormd">
            <textarea class="form-control" id="message-text" style="display:none;">#### 欢迎使用 PSDN， 请在此处编辑框编辑讨论，在右侧查看效果</textarea>
        </div>
        <div style="text-align: center; padding-bottom: 20px;">
            <button type="button" class="btn btn-outline-secondary" id="backIndexBtn">返回首页</button>
            &nbsp;
            &nbsp;
            <button type="button" class="btn btn-outline-primary publish_button" id="publishBtn">发布文章
            </button>
        </div>


        <!-- 提示框 -->
        <div class="modal fade" id="hintModal" tabindex="-1" role="dialog" aria-labelledby="hintModalLabel"
             aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="hintModalLabel">提示</h5>
                    </div>
                    <div class="modal-body" id="hintBody"></div>
                </div>
            </div>
        </div>

    </div>


    <div class="container" style="padding-bottom: 160px"></div>
    {% include "component/footer.html" %}
</div>
<script src="/static/js/jquery-3.1.0.min.js"></script>
<script src="/static/js/popper.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/global.js"></script>
<!-- editormd JS相关文件 -->
<script src="/static/editor-md/editormd.js"></script>
<script type="text/javascript">
    var CONTEXT_PATH = "http://127.0.0.1:5000"

    $(function () {
        $("#publishBtn").click(publish);
        $("#backIndexBtn").click(backIndex);
    });

    function publish() {
        $("#publishModal").modal("hide");
        // 获取标题和内容
        var title = $("#recipient-name").val();
        if (title === "") {
            alert("标题不能为空")
            return;
        }
        var content = $("#message-text").val();
        if (content === "") {
            alert("内容不能为空")
            return;
        }
        // 发送异步请求
        $.ajax({
            type: 'post',
            url: CONTEXT_PATH + "/post/publish",
            data: JSON.stringify({"title": title, "content": content}),
            contentType: 'application/json',
            success: function (data) {
                {#// String -> Json 对象#}
                {#console.log(data)#}
                {#data = $.parseJSON(data);#}
                // 在提示框 hintBody 显示服务端返回的消息
                $("#hintBody").text(data.msg);
                // 显示提示框
                $("#hintModal").modal("show");
                // 2s 后自动隐藏提示框
                setTimeout(function () {
                    $("#hintModal").modal("hide");
                    // 操作完成后，跳转到首页
                    location.href = CONTEXT_PATH + "/index";
                }, 2000);
            },
            error: function (data) {
                alert(data.code + ": 不支持的数据类型，请检查 内容、标题 是否为空")
                console.log(data)
            }
        })
    }

    function backIndex() {
        location.href = CONTEXT_PATH + "/index";
    }

    var testEditor;

    $(function () {
        testEditor = editormd("test-editormd", {
            width: "90%",
            height: 450,
            syncScrolling: "single",
            path: "/static/editor-md/lib/",
            saveHTMLToTextarea: true, // 这个配置，方便 post 提交表单

            /**上传图片相关配置如下*/
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: CONTEXT_PATH + "/discuss/uploadMdPic",// 后端上传图片的服务地址
            onload: function () {
                //console.log('onload', this);
                //this.fullscreen();
                //this.unwatch();
                //this.watch().fullscreen();

                //this.setMarkdown("#PHP");
                //this.width("100%");
                //this.height(480);
                //this.resize("100%", 640);
            }
        });

    });
</script>
</body>
</html>